import React, { useState } from 'react';
import { Radio, Modal, Select, Input } from 'antd';
import { success, error } from '../../utils/Notification/index';
import { AddSeries } from '../../api/Upload';
import LoginStore from '../../store/Login/index';

export const UploadFormSeries = ({ list }) => {

  const { userInfo } = LoginStore();

  const [isModalOpen, setIsModalOpen] = useState(false);//弹窗开关

  const [selectList, setSelectList] = useState({});//选择列表的数据

  const [InputValue, setInputValue] = useState("")//输入框的值

  const showModal = () => {//开启弹窗
    setIsModalOpen(true);
  };

  const handleOk = () => {//确认关闭弹窗
    setIsModalOpen(false);

    selectList['name'] = InputValue;

    selectList['userId'] = userInfo.id;

    console.log(selectList);

    AddSeries(selectList).then((res) => {
      if (res.data.code === 200) {
        success(res.data.msg, res.data.data);
      } else {
        error('添加失败');
      }
    })
  };

  const handleCancel = () => {//取消关闭弹窗
    setIsModalOpen(false);
  };

  const handleChange = (value) => {//更改专栏和分类的事件
    if (value.split("-")[0] === "columnId") {
      success("成功选择专栏")
    } else if (value.split("-")[0] === "cateId") {
      success("成功选择分类")
    }
    setSelectList({
      ...selectList,
      [value.split("-")[0]]: value.split("-")[1]
    });
  }

  return (
    <>
      <Modal
        title="新增用户文章系列"
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Select
          defaultValue="columnId-1"
          style={{ width: 200 }}
          onChange={handleChange}
          options={[
            {
              label: <span>文章专栏</span>,
              title: '文章专栏',
              options: [
                { label: <span>后端</span>, value: 'columnId-1' },
                { label: <span>前端</span>, value: 'columnId-2' },
                { label: <span>服务端</span>, value: 'columnId-3' },
              ],
            },
            {
              label: <span>文章分类</span>,
              title: '文章分类',
              options: [
                { label: <span>技术文章</span>, value: 'cateId-1' },
                { label: <span>干货文章</span>, value: 'cateId-2' },
                { label: <span>八股文章</span>, value: 'cateId-3' },
              ],
            },
          ]}
        />
        <Input style={{ marginTop: '15px' }} onChange={(e) => setInputValue(e.target.value)} placeholder="请输入你想要添加的文章系列" />
      </Modal>
      {list.map((item, index) => ( //系列列表
        <Radio.Button
          key={index}
          style={{ marginLeft: '15px', marginTop: '5px' }}
          value={item.id}
        >
          {item.name}
        </Radio.Button>
      ))}

      <Radio.Button // 点击添加系列
        style={{ marginLeft: '15px' }}
        value={"tailInsert"}
        onClick={showModal}
      >
        {'点击添加系列'}
      </Radio.Button>
    </>
  );
};